import {
  defineConfig,
  // 使用属性模式，您可以将实用程序分成属性: text-sm text-white可以分为以下几类text="sm white"而不重复相同的前缀。
  presetAttributify,
  // UnoCSS的默认预设,此预设继承@unocss/preset-wind和@unocss/preset-mini
  presetUno,
  // 插件后允许使用@apply指令在style中写原子化css 例:.container {  @apply p-5; }
  transformerDirectives,
  // 变体组变压器 例：<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>将被转换为:<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  theme: {
    colors: {
      primary: 'var(--el-color-primary)',
      success: 'var(--el-color-success)',
      warning: 'var(--el-color-warning)',
      danger: 'var(--el-color-danger)',
      error: 'var(--el-color-error)',
      info: 'var(--el-color-info)',
    },
  },
  rules: [],
  shortcuts: [
    ['flex-w', 'flex flex-wrap'],
    ['flex-a', 'flex items-center'],
    ['flex-c', 'flex justify-center'],
    ['flex-ca', 'flex justify-center items-center'],
    ['flex-ce', 'flex justify-center items-end'],
    ['flex-b', 'flex justify-between'],
    ['flex-ba', 'flex justify-between items-center'],
    ['flex-be', 'flex justify-between items-end'],
    ['flex-v', 'flex flex-col'],
    ['flex-va', 'flex flex-col items-center'],
    ['flex-vc', 'flex flex-col justify-center'],
    ['flex-vb', 'flex flex-col justify-between'],
    ['flex-vba', 'flex flex-col justify-between items-center'],
    ['flex-vca', 'flex flex-col justify-center items-center'],
    ['flex-e', 'flex justify-end'],
    ['flex-ea', 'flex justify-end items-center'],
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
})
